<template>
    <div  v-if="testData?.list" style="margin-bottom: 60px">

        <div class="zzc" v-show="imgzzc" @click="djqhzzc">
            <div style="padding: 10px 0;color: white;padding-left: 20px;">{{
                testData?.list?.content_list[0]?.volume }}</div>
            <img :src="testData?.list?.content_list[0]?.img_url" alt="">
            <div class="ybwz jz">{{ testData?.list?.content_list[0]?.title }} | {{
                testData?.list?.content_list[0]?.pic_info }}</div>
        </div>
        <div>
            <div class="top" @click="djtop">
                <van-row type="flex" justify="space-between">
                    <van-col span="10" class="lzb">
                        <div class="lt"> {{ dayStr }}</div>
                        <div class="rt">{{ dateStr }}</div>
                        <div>
                            <svg :class="{ flip: isFlipped }" t="1676453203182" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3614" width="12" height="12">
                                <path
                                    d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z"
                                    fill="#000000" p-id="3615"></path>
                            </svg>
                        </div>
                    </van-col>
                    <!-- 右边 如果是今天的话显示 -->
                    <van-col span="10" class="ybwzwm" v-if="dayJt == true">
                        <div class="ybwz"> {{ testData?.weather?.city_name }} ・</div>
                        <div class="ybwz" style="margin-right: 10px;">{{ testData?.weather?.climate }}</div>
                        <div class="ybwz"> {{ testData?.weather?.temperature }}°C</div>

                    </van-col>
                </van-row>
            </div>

            <!-- 照片 -->
            <div v-if="isFlipped == false">

                <van-tabs class="hometab" v-model:active="active" swipeable @change="itembhh">
                    <van-tab v-for="(item, index) in dateImgs3" :title="'选项 ' + index" :key="item">
                        <transition name="fade">
                            <div class="zpwz">
                                <img @click="djqhzzc" :src="testData?.list?.content_list[0]?.img_url" alt="">
                                <div class="ybwz jz">{{ testData?.list?.content_list[0]?.title }} | {{
                                    testData?.list?.content_list[0]?.pic_info }}</div>
                                <div style="margin-left: 20px;margin-bottom: 50px;">{{
                                    testData?.list?.content_list[0]?.forward
                                }}</div>
                                <div class="ybwz jz">{{ testData?.list?.content_list[0]?.words_info }}</div>
                            </div>
                        </transition>

                        <van-row justify="space-between" style="margin: 10px 0;">
                            <van-col span="12" style="display: flex;box-sizing: border-box;padding-left: 10px;">
                                <svg t="1676608469723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4025" width="16" height="16">
                                    <path
                                        d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m108.544 620.544l-398.336 181.248 181.248-398.336 398.336-181.248z"
                                        fill="#333333" p-id="4026"></path>
                                    <path d="M512 512m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"
                                        fill="#333333" p-id="4027"></path>
                                </svg>
                                <div style="color:#b2b2b2 ;font-size: 12px;box-sizing: border-box;padding-left: 10px;">小记
                                </div>
                            </van-col>
                            <van-col span="12" class="ybicon">
                                <svg t="1676608669474" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="8385" width="16" height="16">
                                    <path
                                        d="M418.4 867.8c-3.8 0-7.7-1.5-10.6-4.4-5.9-5.9-5.9-15.4 0-21.2l311.7-311.7-224-224-311.7 311.7c-5.9 5.9-15.4 5.9-21.2 0-5.9-5.9-5.9-15.4 0-21.2l322.3-322.3c5.9-5.9 15.4-5.9 21.2 0l245.2 245.2c5.9 5.9 5.9 15.4 0 21.2L429 863.4c-2.9 2.9-6.7 4.4-10.6 4.4z"
                                        fill="#bfbfbf" p-id="8386"></path>
                                    <path
                                        d="M740.7 545.5c-4 0-7.8-1.6-10.6-4.4L484.9 295.9c-5.9-5.9-5.9-15.4 0-21.2l56.3-56.3c2.8-2.8 6.6-4.4 10.6-4.4s7.8 1.6 10.6 4.4l245.2 245.2c5.9 5.9 5.9 15.4 0 21.2l-56.3 56.3c-2.8 2.9-6.6 4.4-10.6 4.4z m-224-260.2l224 224 35.1-35.1-224-224-35.1 35.1z"
                                        fill="#bfbfbf" p-id="8387"></path>
                                    <path
                                        d="M797.2 489.1c-4 0-7.8-1.6-10.6-4.4L541.3 239.5c-5.9-5.9-5.9-15.4 0-21.2l35.6-35.6c36-36 94.7-36 130.7 0l135.7 135.7c17.5 17.5 27.1 40.7 27.1 65.4 0 24.7-9.6 47.9-27.1 65.4l-35.6 35.6c-2.8 2.7-6.6 4.3-10.5 4.3z m-224-260.2l224 224 25-25c24.3-24.3 24.3-64 0-88.3L686.5 203.9c-24.3-24.3-64-24.3-88.3 0l-25 25zM418.4 867.8h-0.2l-249.9-2.7c-4 0-7.8-1.7-10.6-4.6-2.8-2.9-4.3-6.7-4.2-10.7l4.7-242.5c0.1-5 2.7-9.7 6.9-12.4 4.2-2.7 9.5-3.1 14.1-1.1l97.6 43.1c4.1 1.8 7.2 5.4 8.4 9.7l18.9 67.2 83.4 18.9c5.2 1.2 9.3 5 11 10l34.2 105.4c1.5 4.6 0.7 9.6-2.2 13.5-2.8 3.9-7.3 6.2-12.1 6.2z m-234.5-32.5l213.9 2.3-25.1-77.5-83.8-19c-5.4-1.2-9.6-5.3-11.1-10.6l-19.4-69-70.5-31.1-4 204.9z"
                                        fill="#bfbfbf" p-id="8388"></path>
                                    <path
                                        d="M267 853.4L172.6 759l-1.8 93.4zM271.6 666.5c-3.8 0-7.7-1.5-10.6-4.4-5.9-5.9-5.9-15.4 0-21.2l287-287.1c5.9-5.9 15.4-5.9 21.2 0 5.9 5.9 5.9 15.4 0 21.2l-287 287.1c-3 2.9-6.8 4.4-10.6 4.4zM381.2 763.2c-3.8 0-7.7-1.5-10.6-4.4-5.9-5.9-5.9-15.4 0-21.2l287.1-287.1c5.9-5.9 15.4-5.9 21.2 0 5.9 5.9 5.9 15.4 0 21.2L391.8 758.8c-2.9 2.9-6.8 4.4-10.6 4.4z"
                                        fill="#bfbfbf" p-id="8389"></path>
                                </svg>
                                <svg t="1676608700839" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="10493" width="16" height="16">
                                    <path
                                        d="M832.8 63.9H191.2c-17.8 0-32.3 14.5-32.3 32.3V878c0 23.3 23.9 38.9 45.3 29.6L489.8 782l331.4 128.4c21.2 8.2 44-7.4 44-30.1V96.2c-0.1-17.9-14.5-32.3-32.4-32.3z"
                                        fill="#bfbfbf" p-id="10494"></path>
                                </svg>
                                <div style="display: flex;">
                                    <!-- 爱心 -->
                                    <svg v-if="axbl == false" @click="axbl = true" t="1676608723950" class="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                        p-id="11545" width="16" height="16">
                                        <path
                                            d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                                            p-id="11546" fill="#bfbfbf"></path>
                                    </svg>
                                    <!-- 爱心亮 -->
                                    <svg v-if="axbl" @click="axbl = false" t="1676655682572" class="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5687"
                                        width="16" height="16">
                                        <path
                                            d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                                            p-id="5688" fill="#d81e06"></path>
                                    </svg>
                                    <div style="font-size: 12px;color: #b2b2b2;">{{ axbl ? 7407 + 1 : 7407 }}</div>
                                </div>
                                <svg t="1676608738205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="12587" width="16" height="16">
                                    <path
                                        d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                                        fill="#bfbfbf" p-id="12588"></path>
                                    <path
                                        d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                                        fill="#bfbfbf" p-id="12589"></path>
                                </svg>
                            </van-col>
                        </van-row>

                        <div class="gdt"></div>

                        <div class="ydwm" @click="tzyd">
                            <!-- 阅读 -->
                            <div class="yd">- 阅读 -</div>
                            <div class="yd2">{{ testData?.list?.content_list[1]?.title }}</div>
                            <div class="yd3">{{ testData?.list?.content_list[1]?.author?.user_name }}</div>
                            <div class="dytext">{{ testData?.list?.content_list[1]?.forward }}</div>
                            <img class="yd4" :src="testData?.list?.content_list[1]?.img_url" alt="">

                            <van-row justify="space-between" style="margin: 10px 0;">
                                <van-col span="12">

                                </van-col>
                                <van-col span="12" class="ybicon">
                                    <div style="display: flex;">
                                        <!-- 爱心 -->
                                        <svg t="1676608723950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="11545" width="16" height="16">
                                            <path
                                                d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                                                p-id="11546" fill="#bfbfbf"></path>
                                        </svg>
                                        <div style="font-size: 12px;color: #b2b2b2;">7407</div>
                                    </div>
                                    <svg t="1676608738205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="12587" width="16" height="16">
                                        <path
                                            d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                                            fill="#bfbfbf" p-id="12588"></path>
                                        <path
                                            d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                                            fill="#bfbfbf" p-id="12589"></path>
                                    </svg>
                                </van-col>
                            </van-row>
                        </div>

                        <div class="gdt"></div>

                        <div class="ydwm" @click="tzwd">
                            <!-- 阅读 -->
                            <div class="yd">- 问答 -</div>
                            <div class="yd2">{{ testData?.list?.content_list[2]?.title }}</div>
                            <div class="yd3">{{ testData?.list?.content_list[2]?.answerer?.user_name }}</div>
                            <div class="dytext">{{ testData?.list?.content_list[2]?.forward }}</div>
                            <img class="yd4" :src="testData?.list?.content_list[2]?.img_url" alt="">

                            <van-row justify="space-between" style="margin: 10px 0;">
                                <van-col span="12">

                                </van-col>
                                <van-col span="12" class="ybicon">
                                    <div style="display: flex;">
                                        <!-- 爱心 -->
                                        <svg t="1676608723950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="11545" width="16" height="16">
                                            <path
                                                d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                                                p-id="11546" fill="#bfbfbf"></path>
                                        </svg>
                                        <div style="font-size: 12px;color: #b2b2b2;">7407</div>
                                    </div>
                                    <svg t="1676608738205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="12587" width="16" height="16">
                                        <path
                                            d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                                            fill="#bfbfbf" p-id="12588"></path>
                                        <path
                                            d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                                            fill="#bfbfbf" p-id="12589"></path>
                                    </svg>
                                </van-col>
                            </van-row>
                        </div>

                        <div class="gdt"></div>

                        <div class="ydwm" @click="tzdt">
                            <!-- 阅读 -->
                            <div class="yd">- 电台 -</div>
                            <img class="yd4 dtimgdt" :src="testData?.list?.content_list[3]?.img_url" alt="">

                            <van-row justify="space-between" style="margin: 10px 0;">
                                <van-col span="12" class="dtimgwm">
                                    <img class="dtimg" :src="testData?.list?.content_list[3]?.author.web_url" alt="">
                                    <div class="dtlmtext">{{ testData?.list?.content_list[3]?.user_name }}</div>

                                </van-col>
                                <van-col span="12" class="ybicon">
                                    <div style="display: flex;">
                                        <!-- 爱心 -->
                                        <svg t="1676608723950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="11545" width="16" height="16">
                                            <path
                                                d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                                                p-id="11546" fill="#bfbfbf"></path>
                                        </svg>

                                        <div style="font-size: 12px;color: #b2b2b2;">7407</div>
                                    </div>
                                    <svg t="1676608738205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="12587" width="16" height="16">
                                        <path
                                            d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                                            fill="#bfbfbf" p-id="12588"></path>
                                        <path
                                            d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                                            fill="#bfbfbf" p-id="12589"></path>
                                    </svg>
                                </van-col>
                            </van-row>
                        </div>

                        <!-- 滑动查看上一个 -->
                        <div class="gdt gdt2"></div>

                        <div class="hdcktext">&lt;&lt; 滑动查看 上一个</div>
                    </van-tab>
                </van-tabs>



            </div>

            <div v-if="isFlipped">
                <van-divider>02月</van-divider>
                <div style="margin-bottom: 20px;">
                    <van-row justify="space-between">
                        <van-col span="12" class="dataitem" v-for="(item, index) in dateImgs2" :key="index"
                            @click="djitemqh(item.date)">
                            <div class="image-box">
                                <img :src="item?.content_list[0]?.img_url" alt="">
                                <div class="date">{{ item?.date }}</div>
                            </div>
                        </van-col>
                    </van-row>
                </div>

                <van-divider>01月</van-divider>
                <div style="margin-bottom: 20px;">
                    <van-row justify="space-between">
                        <van-col span="12" class="dataitem" v-for="(item, index) in dateImgs" :key="index"
                            @click="djitemqh(item.date)">
                            <div class="image-box">
                                <img :src="item?.content_list[0]?.img_url" alt="">
                                <div class="date">{{ item?.date }}</div>
                            </div>
                        </van-col>
                    </van-row>
                </div>
                <div class="dbxzdj" v-if="dbxzdj == false" @click="dbxzdj = true">选择年月</div>
                <van-date-picker v-if="dbxzdj" v-model="currentDate" title="选择年月" :min-date="minDate" :max-date="maxDate"
                    :formatter="formatter" :columns-type="columnsType" @confirm="getMonthDays" />

            </div>
        </div>

        <van-tabbar v-model="active">
            <van-tabbar-item @click="djtz('/home')" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item @click="djtz('/faxian')" icon="apps-o">发现</van-tabbar-item>
            <van-tabbar-item @click="djtz('/lianzai')" icon="coupon-o">连载</van-tabbar-item>
            <van-tabbar-item @click="djtz('/wode')" icon="contact">我的</van-tabbar-item>
        </van-tabbar>
    </div>
    <div v-if="testData?.list == null || textSj?.list == undefined">
        <van-loading size="24px" style="text-align: center;margin-top: 300px;">加载中...</van-loading>
    </div>
</template>

<script>
import axios from '../plugins/axiosInstance';
import { onMounted, reactive, ref, watch } from '@vue/runtime-core';
import { useRouter } from 'vue-router'
export default (
    {
        name: 'Hmoe',
        setup() {

            const isFlipped = ref(false);

            const testData = reactive({
                list: null,
                weather: {},
                content_list: []
            })

            // const weather = reactive({})
            // const content_list = reactive({})

            const imgzzc = ref(false);
            const dayStr = ref('');
            const dateStr = ref('');
            const dayJt = ref(true);
            const active = ref(0)
            const dateImgs = reactive([])
            const dateImgs2 = reactive([])
            const dateImgs3 = reactive([])
            const axbl = ref(false)
            const dbxzdj = ref(false)

            const router = useRouter()
            // 跳转路由
            function tzyd() {
                // 保存阅读id
                localStorage.setItem('yueduId', JSON.stringify(testData?.list?.content_list[1]?.item_id))
                router.push('/yuedu')
            }
            function tzwd() {
                localStorage.setItem('wendaId', JSON.stringify(testData?.list?.content_list[2]?.item_id))
                router.push('/wenda')
            }
            function tzdt() {
                localStorage.setItem('diantaiId', JSON.stringify(testData?.list?.content_list[3]?.item_id))
                router.push('/diantai')
            }

            function djqhzzc() {
                imgzzc.value = !imgzzc.value
                console.log(imgzzc.value);
            }
            // 获取上个月日期跟这个月到今天的日期
            function getdays() {
                // 获取当前日期
                const now = new Date();
                // 获取当前年份和月份
                const year = now.getFullYear();
                const month = now.getMonth() + 1;

                // 获取上个月的年份和月份
                const lastMonthYear = month === 1 ? year - 1 : year;
                const lastMonth = month === 1 ? 12 : month - 1;

                // 获取上个月的天数
                const lastMonthDays = new Date(lastMonthYear, lastMonth, 0).getDate();

                // 获取当前日期的年份、月份和日期
                const currentYear = now.getFullYear();
                const currentMonth = now.getMonth() + 1;
                const currentDay = now.getDate();



                // 循环遍历上个月整个月的日期数组，使用 axios 请求图片
                for (let i = 1; i <= lastMonthDays; i++) {
                    const date = `${lastMonthYear}-${lastMonth.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
                    getSj(date, 'sgy')

                }
                // 构造这个月到今天的日期数组
                for (let i = 1; i <= currentDay; i++) {
                    const date = `${currentYear}-${currentMonth.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
                    getSj(date, 'zgy')

                }


            }
            getdays()

            const currentDate = ref(['2023', '02']);
            const columnsType = ['year', 'month'];

            const formatter = (type, option) => {
                if (type === 'year') {
                    option.text += '年';
                }
                if (type === 'month') {
                    option.text += '月';
                }
                return option;
            };

            // 选择日期后获取的两个月时间
            const minDate = new Date(2012, 0, 1);
            const maxDate = new Date();
            const getMonthDays = () => {
                dbxzdj.value = false
                const year = currentDate.value[0];
                const month = currentDate.value[1];
                const prevMonth = month - 1 < 1 ? 12 : month - 1;
                const prevYear = month - 1 < 1 ? year - 1 : year;
                const currentMonthDays = new Date(year, month, 0).getDate();
                const prevMonthDays = new Date(prevYear, prevMonth, 0).getDate();


                // Get previous month's days
                for (let i = 1; i <= prevMonthDays; i++) {
                    const days = (`${prevYear}-${prevMonth.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`);
                    getSj(days, 'sgy')

                }

                // Get current month's days
                for (let i = 1; i <= currentMonthDays; i++) {
                    if (year == new Date().getFullYear() && month == new Date().getMonth() + 1 && i > new Date().getDate()) {
                        break;
                    }
                    const days2 = (`${year}-${month.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`);
                    getSj(days2, 'zgy')
                }
                dateImgs.splice(0)
                dateImgs2.splice(0)
                dateImgs3.splice(0)
            };

            // let lastMonthDates = reactive(getdays().lastMonthDates)
            // let currentMonthDates = reactive(getdays().currentMonthDates)
            // console.log(lastMonthDates);
            // console.log(currentMonthDates);

            // 获取今天时间
            function getDate() {
                dayJt.value = true
                const date = new Date();
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
            }

            // state.date获取到今天的时间
            const state = reactive({
                date: getDate(),
            });


            function itembhh(num) {
                // 获取点击tabs的位置

                djitemqh(dateImgs3[num])

            }
            // 点击天数+1
            function handleAdd() {
                dayJt.value = false
                const [year, month, day] = state.date.split('-');
                const date = new Date(`${month}/${day}/${year}`);
                date.setDate(date.getDate() + 1);
                const newYear = date.getFullYear();
                const newMonth = date.getMonth() + 1;
                const newDay = date.getDate();
                state.date = `${newYear}-${newMonth < 10 ? '0' : ''}${newMonth}-${newDay < 10 ? '0' : ''}${newDay}`;
            }
            // 点击天数-1
            function handleMinus() {
                dayJt.value = false
                const [year, month, day] = state.date.split('-');
                const date = new Date(`${month}/${day}/${year}`);
                date.setDate(date.getDate() - 1);
                const newYear = date.getFullYear();
                const newMonth = date.getMonth() + 1;
                const newDay = date.getDate();
                state.date = `${newYear}-${newMonth < 10 ? '0' : ''}${newMonth}-${newDay < 10 ? '0' : ''}${newDay}`;
            }

            // 根据时间获取首页显示的字符串拼接
            function getDateStr(dateStr) {
                const [year, month, day] = dateStr.split('-');
                const months = {
                    '01': 'Jan',
                    '02': 'Feb',
                    '03': 'Mar',
                    '04': 'Apr',
                    '05': 'May',
                    '06': 'Jun',
                    '07': 'Jul',
                    '08': 'Aug',
                    '09': 'Sep',
                    '10': 'Oct',
                    '11': 'Nov',
                    '12': 'Dec',
                };
                const monthStr = months[month];
                const str = `${monthStr}.${year}`;

                return [day, str];
            };

            // 点击top显示隐藏日期选择
            function djtop() {

                if (isFlipped.value == false) {
                    isFlipped.value = true
                }
            }

            dateStr.value = getDateStr(Ifday())[1] //may.2022
            dayStr.value = getDateStr(Ifday())[0]   //25
            // getDateStr是首页显示的字符串拼接，输入年月份按照这个格式，可以返回 25May.2022这种格式的字符串



            // 获取指定日期数据
            function getSj(date, name) {
                const now = new Date(); // 获取当前时间
                const hour = now.getHours(); // 获取当前小时数
                const isEarlyMorning = hour >= 0 && hour < 6; // 0-5 点为早晨
                const isMorningOrLater = hour >= 6; // 6 点之后为早晨或之后
                axios({
                    url: `https://apis.netstart.cn/one/channel/one/${date}`,
                    method: 'get'
                }).then((res) => {

                    if (name == 'sgy') {
                        dateImgs.unshift({
                            date,
                            weather: res?.data?.data?.weather,
                            content_list: res?.data?.data?.content_list
                        })
                        if (isEarlyMorning) {
                            // 在早晨时段，做一些逻辑
                            if (date == getDate()) {
                                return
                            } else {
                                dateImgs3.unshift(date)
                            }
                        } else if (isMorningOrLater) {
                            dateImgs3.unshift(date)
                        }


                    }
                    if (name == 'zgy') {
                        if (isEarlyMorning) {
                            // 在早晨时段，做一些逻辑
                            if (date == getDate()) {
                                return
                            } else {
                                dateImgs2.unshift({
                                    date,
                                    weather: res?.data?.data?.weather,
                                    content_list: res?.data?.data?.content_list
                                })
                            }
                        } else if (isMorningOrLater) {
                            dateImgs2.unshift({
                                date,
                                weather: res?.data?.data?.weather,
                                content_list: res?.data?.data?.content_list
                            })
                        }

                        if (isEarlyMorning) {
                            // 在早晨时段，做一些逻辑
                            if (date == getDate()) {
                                return
                            } else {
                                dateImgs3.unshift(date)
                            }
                        } else if (isMorningOrLater) {
                            dateImgs3.unshift(date)
                        }
                    }
                    localStorage.setItem('dateImgs', JSON.stringify(dateImgs))
                    localStorage.setItem('dateImgs2', JSON.stringify(dateImgs2))
                    localStorage.setItem('dateImgs3', JSON.stringify(dateImgs3))
                }).catch(()=>{})
            }

            watch(active, (newValue) => {
                active.value = newValue
            });



            // 点击图片切换日期    
            function djitemqh(item) {
                if (isFlipped.value == true) {
                    isFlipped.value = false
                }
                axios({
                    url: `https://apis.netstart.cn/one/channel/one/${item}`,
                    method: 'get'
                }).then((res) => {
                    if (res.status == 200) {
                        testData.list = res?.data?.data
                        testData.weather = res?.data?.data?.weather
                        testData.content_list = res?.data?.data?.content_list

                        dateImgs3.forEach((e, i) => {
                            if (e == item) {
                                active.value = i
                            }
                        })
                    }
                }).catch(()=>{})
                state.date = item
                dateStr.value = getDateStr(state.date)[1]
                dayStr.value = getDateStr(state.date)[0]
            }

            // 判断今天时间大于6点就返回今天的，如果小于6点就返回昨天的，因为6点前数据没更新
            function Ifday() {
                const now = new Date();
                const hour = now.getHours();
                const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);

                let dateStr = ''
                if (hour < 6) {
                    dateStr = `${yesterday.getFullYear()}-${(yesterday.getMonth() + 1).toString().padStart(2, '0')}-${yesterday.getDate().toString().padStart(2, '0')}`;
                } else {
                    dateStr = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
                }
                return dateStr
            }

            onMounted(() => {
                if (JSON.parse(localStorage.getItem('twdc')) == true && JSON.parse(localStorage.getItem('twdc')) !== null) {
                    isFlipped.value = true
                    localStorage.setItem('twdc', JSON.stringify(false))
                }
                axios({
                    url: `https://apis.netstart.cn/one/channel/one/${Ifday()}`,
                    method: 'get'
                }).then((res) => {
                    if (res.status == 200) {
                        testData.list = res?.data.data
                        testData.weather = res?.data.data.weather
                        testData.content_list = res?.data.data.content_list
                        console.log(testData.list);
                    }
                }).catch(()=>{})
            })
            function djtz(url) {
                router.push(url)
            }

            return {
                testData, djtz, dayStr, dateStr, dayJt, isFlipped, djtop, dateImgs, dateImgs2, dateImgs3, djitemqh, active, itembhh, imgzzc, djqhzzc, tzyd, tzwd, tzdt, axbl, currentDate,
                columnsType,
                formatter,
                minDate,
                maxDate,
                getMonthDays,
                dbxzdj
            }
        }
    }
)
</script>

<style lang="less" scoped>
.dbxzdj {
    width: 100%;
    height: 40px;
    background-color: #fbfbfb;
    text-align: center;
    line-height: 40px;
}

.zzc {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    z-index: 99999;

    img {
        width: 100%;
    }
}

.dtimgdt {
    height: 170px !important;
}

.hdcktext {
    font-size: 12px;
    height: 100px;
    width: 100%;
    color: #bdbdbd;
    background-color: #fcfcfc;
    text-align: center;
    line-height: 100px;
}

.dtimgwm {
    position: relative;
}

.dtimg {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    bottom: 0;
    left: 10px;
}

.dtlmtext {
    position: absolute;
    font-size: 14px;
    color: #a8a8a8;
    bottom: 0;
    left: 45px;
}

.ydwm {
    box-sizing: border-box;
    padding: 10px;
}

.yd {
    width: 100%;
    height: 20px;
    color: #b1b1b1;
    font-size: 12px;
    text-align: center;
    margin: 20px 0;
}

.yd2 {
    font-weight: 600;

}

.yd3 {
    color: #b1b1b1;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.dytext {
    font-size: 14px;
    color: #818181;
    margin-bottom: 20px;
}

.yd4 {
    width: 100%;
    border-radius: 10px;
}

.gdt {
    height: 10px;
    background-color: #f7f7f7;
    width: 100%;
}

.gdt2 {
    height: 5px;
}

.ybicon {
    display: flex;
    justify-content: space-evenly;
}

.dataitem {
    margin-bottom: 20px;
}

.dataitem:nth-child(even) {
    display: flex;
    justify-content: flex-end;
}

.image-box {
    border: 1px solid #ccc;
    /* 设置边框 */
    display: inline-block;

    /* 将盒子设置为行内块元素，以便于其他元素与之并排显示 */
    img {
        width: 153px;
        height: 88px;
    }
}

.date {
    padding: 10px 0;
    text-align: center;
    /* 将日期居中显示 */
}

// 淡入淡出动画
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.zpwz {
    box-shadow: 0px 1px 5px 1px #d4d4d4;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 10px;

    img {
        width: 100%;
        border-radius: 10px 10px 0 0;
        margin-bottom: 20px;
    }
}

.jz {
    text-align: center;
    padding-bottom: 30px;
}

.flip {
    transform: rotateZ(180deg);
}

.top {
    box-sizing: border-box;
    padding: 5px;
}

.ybwzwm {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;


}

.ybwz {
    font-size: 12px;
    color: rgb(201, 201, 201);
}

.lzb {
    display: flex;
    align-items: flex-end;
}

.lt {
    font-weight: 600;
    margin-right: 5px;
    display: flex;
}

.rt {
    font-size: 12px;
    display: flex;
}
</style>